@import 'styles/variables'
@import 'styles/mixins'

$color-typo-dark-primary: $grey-dark-3
$color-typo-dark-secondary: $grey-dark-1
$color-typo-grey-primary: $grey-2

$color-bg-light-primary: $violet-light-3
$color-bg-light-secondary: $violet-light-1
$color-bg-white-primary: $white
$color-bg-orange-primary: $orange-3
$color-bg-step: $orange-2
$color-bg-overlay: $orange-2

$color-border-grey-primary: $grey-1
$color-border-btn: $grey-dark-1
$color-border-step: $white
$color-border-star: $white

.success-page
  &__container
    background: $color-bg-light-primary

  &__header
    padding-bottom: 175px

    background-image: url('/assets/train_stop.jpg')
    background-repeat: no-repeat
    background-size: cover
    background-color: $color-bg-overlay

    @include media(mobile)
      padding-bottom: 80px

    &_text.success-page__header_text
      margin-top: 18%
      margin-bottom: 0.5em
      @include section-width

      @include to(tablet)
        padding-inline: 20px
        font-size: 3rem

  &__content
    background: $color-bg-white-primary
    border: 1px solid $color-border-grey-primary
    box-shadow: 0px 2px 2px rgb(0 0 0 / 25%)

    @include from(tablet)
      position: relative
      top: -175px

    @include media(tablet)
      top: -100px

    &_section
      @include section-width

      @include media(tablet)
        padding: 15px

      @include media(mobile)
        padding: 0
        padding-bottom: 50px

.order-header
  display: flex
  justify-content: space-between

  padding: 60px 80px 40px
  border-bottom: 1px solid $color-border-grey-primary

  font-size: 2.25rem

  @include to(laptop)
    flex-direction: column
    gap: 20px
    padding: 40px 60px

  @include media(laptop)
    align-items: center

  @include to(mobile)
    padding-inline: 25px

  &__number,
  &__digits
    font-weight: 700
    color: $color-typo-dark-secondary
  &__sum
    color: $color-typo-grey-primary

.ticket-steps__list
  display: flex
  justify-content: center
  gap: 40px

  padding-block: 50px 40px

  background: $color-bg-light-secondary

  @include to(tablet)
    padding: 30px
    flex-direction: column
    align-items: center
    gap: 30px

.ticket-steps__item
  display: flex
  flex-direction: column
  align-items: center

  width: 200px
  max-width: 100%

  @include to(tablet)
    width: 300px

.ticket-step
  &__icon
    width: 130px
    height: 130px
    display: block

    @include media(mobile)
      width: 160px
      height: 160px

    @include media(tablet)
      width: 200px
      height: 200px

    &_wrapper
      margin-bottom: 25px
      border: 12px solid $color-border-step
      border-radius: 50%

      @include to(tablet)
        margin-bottom: 10px

    path
      fill: $color-bg-step

  &__text
    font-weight: 400
    font-size: 1.125rem
    text-align: center

    color: $color-typo-dark-primary

    b
      font-weight: 500

.success-page
  &__text
    padding-inline: 14%

    @include media(mobile)
      padding-inline: 20px

    @include media(tablet)
      padding-inline: 30px

    @include to(desktop)
      padding-block: 5vmax 6.8vmax

    @include media(widescreen)
      padding-block: 90px 135px

  &__paragraph
    font-size: 1.5rem
    color: $color-typo-dark-primary

    &:first-of-type
      margin-bottom: min(4.5vmax, 90px)

h3.order-information__title
  margin-bottom: 2.5vmax
  text-transform: none

.order-footer
  display: flex
  justify-content: space-between

  padding: 50px 80px

  background: $color-bg-orange-primary

  @include to(desktop)
    flex-direction: column
    align-items: center
    gap: 50px

    padding-inline: 40px

.rate-service
  display: flex
  align-items: center
  gap: 30px

  @media (max-width: 768px)
    flex-direction: column

  &__label
    font-size: 1.5rem
    color: $color-typo-dark-primary
  &__stars
    display: flex
    gap: 20px
    @include media(mobile)
      gap: 10px

.star
  fill: none
  &__wrapper
    width: 48px
    height: 48px
    cursor: pointer
  path
    stroke: $color-border-star
    stroke-width: 2px
  &.filled
    fill: $color-border-star

.success-page__button.success-page__button
  width: auto
  max-width: none
  border: 1px solid $color-border-btn

  text-transform: uppercase

  background: transparent
  color: $color-typo-dark-primary
